import React, { Component } from "react";
import "./Login.less";
import { userLogin } from "../api/login";
import userImg from "../assets/img/account@2x.png";
import passImg from "../assets/img/password@2x.png";
import store from "../store/index";
export default class Login extends Component {
  constructor(props) {
    super();
    this.state = {
      accountClass: "input account border-gray",
      passClass: "input psd border-gray",
      isAccount: false, //账号
      isPassword: false, //密码
      isShow: false, //密码错误
      account: "", //账号
      pass: "" //密码
    };
  }
  //将日期转成字符串
  dateToString(d) {
    var _y = d.getFullYear();
    var _M = d.getMonth() + 1;
    var _d = d.getDate();
    var _h = d.getHours();
    var _m = d.getMinutes();
    var _s = this.toTwo(d.getSeconds());
    // var _w = d.getDay();
    // var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var str = "";
    str = _y + "年" + _M + "月" + _d + "日 " + _h + ":" + _m + ":" + _s + " ";
    // str += arr[_w];

    return str;
  }
  toTwo(v) {
    return v < 10 ? "0" + v : v;
  }
  onFinish = () => {
    if(this.state.account === ""){
      this.setState({
        accountClass : "input account border-red",
        isAccount : true
      })
    }
    if(this.state.pass === ""){
      this.setState({
        passClass : "input psd border-red",
        isPassword : true
      })
    }

    if(this.state.account !== "" && this.state.pass !== ""){
      userLogin({
        username: this.state.account,
        userpass: this.state.pass
      }).then(res => {
        if (res.state === 200 && res.data === 1) {
          this.setState({
            isShow: false,
            passClass : "input psd border-red"
          });
          localStorage.setItem("token", JSON.stringify(res.token));
          localStorage.setItem("roletype",res.token.roleType);
          localStorage.setItem("loginTime",this.dateToString(new Date()));
          store.dispatch({
            type : "setMenuList"
          })
          this.props.history.push({ pathname: "/admin/index" });
        } else {
          this.setState({
            isShow: true,
            passClass : "input psd border-red"
          });
        }
      });
    }
  };
  //失焦判断
  inputOnBlur = () => {
    if (this.state.account === "") {
      this.setState({
        isAccount: true,
        accountClass: "input account border-red"
      });
    } else {
      this.setState({
        isAccount: false,
        accountClass: "input account border-blue"
      });
    }
  };
  //失焦判断
  inputOnBlur1 = () => {
    if (this.state.pass === "") {
      this.setState({
        isPassword: true,
        passClass: "input psd border-red"
      });
    } else {
      this.setState({
        isPassword: false,
        passClass: "input psd border-blue"
      });
    }
  };
  //双向绑定
  changeVal(ev, i) {
    if (i === 1) {
      this.setState(
        {
          account: ev.target.value
        },
        () => {
          if (this.state.account === "") {
            this.setState({
              isAccount: false,
              accountClass: "input account border-gray"
            });
          }else{
            this.setState({
              isAccount: false,
              accountClass: "input account border-blue"
            });
          }
        }
      );
    }else if( i === 2 ){
      this.setState({
        pass : ev.target.value
      },()=>{
        if(this.state.pass === ""){
          this.setState({
            passClass : "input psd border-gray",
            isPassword : false,
            isShow: false
          })
        }else{
          this.setState({
            passClass : "input psd border-blue",
            isPassword : false,
            isShow: false
          })
        }
      })
    }
  }
  render() {
    return (
      <div className="Login">
        <div className="login-box">
          <div className="title">后台管理系统</div>
          <div style={{ height: "70px" }}>
            <div className={this.state.accountClass}>
              <img src={userImg} alt="" />
              <input
                onBlur={this.inputOnBlur}
                onChange={ev => this.changeVal(ev, 1)}
                className="desc"
                type="text"
                maxLength="11"
                placeholder="账号"
                value={this.state.account}
              />
            </div>
            {this.state.isAccount ? (
              <div className="error">请输入账号</div>
            ) : (
              ""
            )}
          </div>
          <div style={{ height: "70px" }}>
            <div className={this.state.passClass}>
              <img src={passImg} alt="" />
              <input
                onBlur={this.inputOnBlur1}
                className="desc"
                type="password"
                placeholder="密码"
                value={this.state.pass}
                onChange={ev => this.changeVal(ev, 2)}
              />
            </div>
            {this.state.isPassword ? (
              <div className="error">请输入密码</div>
            ) : (
              ""
            )}
            {this.state.isShow ? (
              <div className="error">账户名或者密码错误</div>
            ) : (
              ""
            )}
          </div>
          <div className="btn" onClick={this.onFinish} >登录</div>
        </div>
      </div>
    );
  }
}
